<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 600px;
        }
        div{
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" placeholder="0" />
        <button id="btn0">0</button>
        <button id="btn1">1</button>
        <button id="btn2">2</button>
        <button id="btn3">3</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button>+</button>
        <button>-</button>
        <button>=</button>
    </div>
    <script>
        // document.querySelector("#btn1").onclick = function(eve){
        //     document.querySelector("input").value += 
        //     this.innerHTML;
        // };
        // document.querySelector("#btn2").onclick = function(eve){
        //     document.querySelector("input").value += 
        //     this.innerHTML;
        // };
        document.querySelector("body").onclick = function(eve){
            alert("body被点击了");
        };
        document.querySelector("div").onclick = function(eve){
            if(eve.target instanceof  HTMLButtonElement){
                let sCode = eve.target.innerHTML;
                let oDis = document.querySelector("input");
                if("=" == sCode){//如果点击的是等号按钮
                    //console.log(eval(document.querySelector("input").value));
                    oDis.value = eval(oDis.value);//计算逻辑   最简易的计算表达式   使用   eval函数
                }else{
                    oDis.value += sCode;
                }
            }
            // 对于非 button 元素  目前是按照默认形式处理    
            // console.log(eve.target.innerHTML);
            eve.stopPropagation();//停止冒泡
        };
    </script>
</body>
</html>